<template>
  <el-empty description="暂时没有订单哦！" style="height: 500px;" v-if="datanotnull" />
  <el-skeleton :rows="6" animated v-show="flag" />
  <div id="box" class="animate__animated animate__fadeIn">
    <div v-for="(item,index) in plane_msg.plane.slice(start,end)" :key="index">
      <div id="order_box">
        <div class="order_herder">
          <div class="herder_style">
            <input type="checkbox" style="margin:10px;">
            <span>订单号：{{item.id}}</span>
            <span>预定日期：{{item.orderTime}}</span>
            <span v-if="item.tickets==1">{{item.tickets.upCity}}-{{item.tickets.downCity}}</span>
            <span><a style="color:blue;" @click="del_order(item.id)">删除订单</a></span>
            <span v-if="drawer" style="color:blue; position: absolute;right: 10px;" @click="drawer=false">返回</span>
          </div>
        </div>
        
        <div class="order_body" >
          <div class="body_style" v-if="!drawer">
            <div class="body_span" style="width:68%;display:flex;  position: absolute;right:30px;" >
              <div style="margin-right: 20px;width: 420px;height: 340px;overflow: hidden;position: relative;" >
                <p style="font-weight:700;font-size:24px;color: var(--el-text-color-primary);">购票人信息</p>
                <div class="peopleMsg" style="width:100%;height:120px;margin-top:25px;display: flex;" v-for="(p,index) in item.orderVo" :key="index" v-show="item.orderVo.length>=2">
                      <div style="width:60%;height:100%;display:flex;flex-direction: column;justify-content: space-between;">
                          <span><span style="font-weight:700;">真实姓名</span>：{{p.people.nickname}}</span>
                          <span><span style="font-weight:700;">性别</span>：{{p.people.sex}}</span>
                          <span><span style="font-weight:700;">年龄</span>：{{p.people.age}}</span>
                          <span><span style="font-weight:700;">社会面貌</span>：<el-tag style="font-size: 18px;width: 85px;">{{p.people.peopleType}}</el-tag></span>

                      </div>
                      <div style="width:90%;height:100%;display: flex;flex-direction: column;justify-content: space-between;">
                          <span><span style="font-weight:700;">电话号码</span>：{{ p.people.phone ? p.people.phone.replace(/^(.{3})(?:\w+)(.{4})$/,
                      "\$1 **** \$2") : ""}}</span>
                          <span><span style="font-weight:700;">身份证号码</span>：{{ p.people.cardId ? p.people.cardId.replace(/^(.{4})(?:\w+)(.{3})$/,
                      "\$1***********\$2") : ""}}</span>
                          <span><span style="font-weight:700;">家庭详细住址</span>：{{p.people.address}}</span>
                      </div>
                </div>
                <div v-show="item.orderVo.length<2" v-for="(p,index) in item.orderVo" :key="index"> 
                  <ul>
                    <li>真实姓名：{{p.people.nickname}}</li>
                    <li>电话号码：{{ p.people.phone ? p.people.phone.replace(/^(.{3})(?:\w+)(.{4})$/,
                      "\$1 **** \$2") : ""}}</li>
                    <li>身份证号码：{{ p.people.cardId ? p.people.cardId.replace(/^(.{4})(?:\w+)(.{3})$/,
                      "\$1***********\$2") : ""}}</li>
                    <li>社会面貌：<el-tag style="font-size: 18px;width: 85px;">{{p.people.peopleType}}</el-tag>
                    </li>
                    <li>常住地：{{p.people.country}}{{p.people.address}}</li>
                  </ul>
                  
                </div>

                <span style="position:absolute;top: 0px;right: 0;"  >
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="此次行程包含多名乘客，点击查看更多信息"
                        placement="top"
                      >
                        <el-button style="width:90px;font-size: 16px;height: 30px;" @click="clickallMsg(1,index)">更多信息</el-button>
                      </el-tooltip>
                </span>

              </div>

              <div>
                <p style="font-weight:700;font-size:24px;color: var(--el-text-color-primary);">飞机详细信息</p>
                <ul>
                  <li >飞机机舱：<span v-if="item.ticketType==1">头等舱</span> <span v-if="item.ticketType==2">商务舱</span><span v-if="item.ticketType==3">经济舱</span></li>
                  <li>飞机票价：￥{{item.orderMoney/item.orderVo.length}}/人</li>
                  <li>订单票数：{{item.ticketVo.length}}</li>
                  <!-- <li>订单票价(总金额)：￥{{item.orderMoney}}</li> -->
                  <li>订票方式：网上预定</li>
                  <li>
                    <span v-if="item.orderStatus==1" style="color:#F56C6C;">订单状态：订单未支付</span>
                    <span v-if="item.orderStatus==2" style="color:#67C23A;">订单状态：订单已支付</span>
                    <span v-if="item.orderStatus==3" style="color:#F56C6C;">订单状态：订单已超时</span>
                    <span v-if="item.orderStatus==4" style="color:#F56C6C;">订单状态：订单已退票</span>
                    <span v-if="item.orderStatus==5" style="color:#67C23A;">订单状态：订单已改签</span>
                    <span v-else-if="item.orderStatus==6" style="color:#67C23A;">订单状态：订单已完成</span>
                  </li>
                </ul>
              </div>
              <div style="position: absolute;right: -80px;bottom: 255px;">
                <ul>
                  <li>订单票价(总金额)：￥<span style="font-size:64px;color:#E6A23C; ">{{item.orderMoney}}</span></li>
                  <el-progress type="circle" :percentage="25" status="warning" style="margin:50px 100px;"
                    v-if="item.orderStatus==1">
                    <span>未支付</span>
                  </el-progress>
                  <el-progress type="circle" :percentage="75" status="success" style="margin:50px 100px;"
                    v-if="item.orderStatus==2">
                    <span>已支付</span>
                  </el-progress>
                  <el-progress type="circle" :percentage="0" status="exception" style="margin:50px 100px;"
                    v-if="item.orderStatus==3">
                    <span>已超时</span>
                  </el-progress>
                  <el-progress type="circle" :percentage="0" status="exception" style="margin:50px 100px;"
                    v-if="item.orderStatus==4">
                    <span>已退票</span>
                  </el-progress>
                  <el-progress type="circle" :percentage="75" status="success" style="margin:50px 100px;"
                    v-if="item.orderStatus==5">
                    <span>已改签</span>
                  </el-progress>
                  <el-progress type="circle" :percentage="100" status="success" style="margin:50px 100px;"
                    v-if="item.orderStatus==6">
                    <span>已完成</span>
                  </el-progress>

                </ul>
              </div>
            </div>

            <div class="body_span plan_span">
              <div class="tripMsg" v-if="item.ticketVo.length>1">
                  <span style="font-weight:700;font-size:24px;color: var(--el-text-color-primary);">行程信息</span>
                  <div style="width:100%;height:45px;margin-top:20px;"  v-for="(i,j) in item.ticketVo" :key="j"> 
                    <div style="width:100%;height:50px;position: relative;display: flex;line-height: 2;text-align:center;">
                      <p style="width: 80px;">{{i.tickets.upCity}}</p>
                      <!-- <img src="../../assets/直线.png" alt="" style="width:145px;margin-left:20px;"> -->
                      <img src="../../assets/小飞机.png" alt="" style="width:50px;left: 120px;">
                      <p style="width: 80px;">{{i.tickets.downCity}}</p>
                      <i style="margin-top:8px;margin-right:10px;font-size:14px;">起飞时间</i>
                      <p>{{i.tickets.startTime.slice(0,5)}}</p>
                    </div>
                  </div>
                  <span style="position:absolute;bottom: -35px;left: 5px;  z-index: 999;" v-show="item.ticketVo.length>1" >
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="此次行程包含多程机票，点击查看更多信息"
                        placement="top"
                         
                      >
                        <el-button style="width:90px;font-size: 16px;height: 30px;" @click="clickallMsg(2,index)">更多信息</el-button>
                      </el-tooltip>
                  </span>
              </div>
              <div v-if="item.ticketVo.length==1" >
                  <div v-for="(i,j) in item.ticketVo" :key="j" style="    line-height: 1.8;">
                      <span class="line-height:2;">
                        <img src="../../assets/lyz的飞机.png" alt="" style=" position: absolute;left: 170px;">
                      </span>
                      <span style="margin-left: 25px;">起始地</span>
                      <span style="margin-left:110px;">目的地</span>
                      <div class="city_font" style="width:460px;margin: 20px 0;">
                        <span>{{i.tickets.upCity}}出发</span>
                        <span>抵达{{i.tickets.downCity}}</span>
                      </div>
                      <div style="display: flex;justify-content: space-around;margin-top: -10px;">
                        <p>
                          {{item.flightNumber[0].upAirportName}}
                        </p>
                        <p>
                          {{item.flightNumber[0].sailingTime}}
                          <img src="../../assets/箭头.png" alt="" style="position: absolute;margin: 20px -82px;width:80px;">
                        </p>
                        <p>{{item.flightNumber[0].downAirportName}}</p>
                      </div>
                      <div style="display: flex;justify-content: space-around;margin-top: 35px;" class="time_sty">
                        <p>
                        <h3>{{i.tickets.startDate}}</h3>{{item.flightNumber[0].starTime}}</p>
                        <p>至</p>
                        <p>
                        <h3>{{i.tickets.startDate}}</h3>{{item.flightNumber[0].endTime}}</p>
                      </div>
                      <div style="width:100%;text-align: center;margin-top: 15px;">
                        <img :src="item.flightNumber[0].companyLogos" alt=""
                          style="position: absolute;right: 320px;top: 275px;">
                        <p>{{item.flightNumber[0].company}}{{i.tickets.fname}}</p>
                        <p style="margin-left:-10px">计划机型：{{i.tickets.pname}}</p>
                      </div>

                  </div>
              </div>

            </div>

          </div>
            <div style="width:100%;position: absolute;display: flex;" v-if="drawer" >
              <div v-if="flags==1&item.orderVo.length>1" style="width:100%;height:120px;margin-top:25px;display: flex;">
                  <div class="peopleMsg" style="width:100%;height:120px;margin-top:25px;display: flex;"  v-for="(p,index) in item.orderVo" :key="index" v-show="item.orderVo.length>=2" >
                        <div style="width:55%;height:100%;display:flex;flex-direction: column;justify-content: space-between;">
                            <span><span style="font-weight:700;">真实姓名</span>：{{p.people.nickname}}</span>
                            <span><span style="font-weight:700;">性别</span>：{{p.people.sex}}</span>
                            <span><span style="font-weight:700;">年龄</span>：{{p.people.age}}</span>
                            <span><span style="font-weight:700;">社会面貌</span>：<el-tag style="font-size: 18px;width: 85px;">{{p.people.peopleType}}</el-tag></span>

                        </div>
                        <div style="width:90%;height:100%;display: flex;flex-direction: column;justify-content: space-between;">
                            <span><span style="font-weight:700;">电话号码</span>：{{ p.people.phone ? p.people.phone.replace(/^(.{3})(?:\w+)(.{4})$/,
                        "\$1 **** \$2") : ""}}</span>
                            <span><span style="font-weight:700;">身份证号码</span>：{{ p.people.cardId ? p.people.cardId.replace(/^(.{4})(?:\w+)(.{3})$/,
                        "\$1***********\$2") : ""}}</span>
                            <span><span style="font-weight:700;">家庭详细住址</span>：{{p.people.address}}</span>
                        </div>
                  </div>
              </div>
              <div v-if="flags==2&item.ticketVo.length>1"  style="width:100%;height:330px;margin-top:25px; display: flex;   overflow: scroll;overflow-y: hidden;">
                  <div v-for="(i,j) in item.ticketVo" :key="j" style="width:400px;height:330px;line-height: 1.8;margin-right:20px;position: relative;">
                      <div style="display:flex;font-size: 28px;">
                      <span style="margin-left:30px;">起始地</span>
                      <span  style="margin-left:170px;">目的地</span>
                      </div>
                      
                      <div  style="width:460px;margin: 20px 0;font-size:22px;">
                        <span style="margin-left:25px;">{{i.tickets.upCity}}出发</span>
                        <span style="margin-left:160px;">抵达{{i.tickets.downCity}}</span>
                      </div>
                      <div style="display: flex;justify-content: space-around;margin-top: -10px;">
                        <p>
                          {{item.flightNumber[0].upAirportName}}
                        </p>
                        <p>
                          {{item.flightNumber[0].sailingTime}}
                          <img src="../../assets/箭头.png" alt="" style="position: absolute;top: 65px;left: 175px;width:50px;">
                        </p>
                        <p>{{item.flightNumber[0].downAirportName}}</p>
                      </div>
                      <div style="display: flex;justify-content: space-around;margin-top: 35px;" class="time_sty">
                        <p>
                        <h3>{{i.tickets.startDate}}</h3>{{item.flightNumber[0].starTime}}</p>
                        <p>至</p>
                        <p>
                        <h3>{{i.tickets.startDate}}</h3>{{item.flightNumber[0].endTime}}</p>
                      </div>
                      <div style="width:100%;text-align: center;margin-top: 15px;">
                        <p>{{item.flightNumber[0].company}}{{i.tickets.fname}}</p>
                        <p style="margin-left:-10px">计划机型：{{i.tickets.pname}}</p>
                      </div>

                  </div>
              </div>
              <div v-if=" item.orderVo.length==1&flags==1|item.ticketVo.length==1&flags==2" style="width: 100%;height: 100%; position: absolute;">
                <el-empty description="单个机票和乘客信息请查看详细页面"></el-empty>
              </div>

            </div>

        </div>
        <div class="order_footer" v-if="!drawer">
          <button class="footer_but buy" v-if="item.orderStatus==1" @click="nowpay(item,item.id)">立即支付</button>
          <button class="footer_but buy" v-if="item.orderStatus==2" @click="upTicket(item.id,item.orderMoney,item)">我要改签</button>
          <button class="footer_but del" style="color:#F56C6C" v-if="item.orderStatus==1" @click="cancelOrder(item.id,item.orderMoney,item)">取消订单</button>
          <button class="footer_but buy" v-if="item.orderStatus==3|item.orderStatus==4" @click="buyone(item.ticketVo[0].tickets.upCity,item.ticketVo[0].tickets.downCity,1)">重新购买</button>
          <button class="footer_but buy" v-if="item.orderStatus==2 |item.orderStatus==5|item.orderStatus== 6"
            @click="buyone(item.ticketVo[0].tickets.upCity,item.ticketVo[0].tickets.downCity,2)">再买一张</button>
          <button class="footer_but del" style="color:#F56C6C"
            v-if="item.orderStatus==2|item.orderStatus== 6" @click="retreatnow(item.id,item.orderMoney,item)">我要退票</button>
          <button class="footer_but del" style="color:#F56C6C" @click="del_order(item.id)"
            v-if="item.orderStatus==3|item.orderStatus==4|item.orderStatus==6">删除订单</button>

        </div>
      </div>
    </div>

    <div>
      <el-pagination layout="prev, pager, next" :total="plane_msg.plane.length*10/2"
        @current-change="handleCurrentChange" style="font-size:18px;" v-if="pageshow" />
    </div>
  </div>


</template>

<script setup>
import { ref, reactive,getCurrentInstance, onMounted,provide } from "vue";
import url from "../../common/js/APIUtil"
import { ElMessage } from 'element-plus'
import {useRouter} from "vue-router"
import { useStore } from '../../store/store';

const { proxy } = getCurrentInstance();

onMounted(()=>{
  getOrderMsg()
  sessionStorage.setItem("Byorder",2)

})

// 从第几条开始
let start=ref(0)
// 往后显示几条
let end=ref(2)

let handleCurrentChange=function(value){
    start.value=value*2-2
    end.value=value*2
}

let flag=ref(true)
let datanotnull=ref(false)
let pageshow=ref(false)
let plane_msg=reactive({
    plane:[]
})
let ticket=[]
let getOrderMsg=function(){
    proxy.$http({
    method:"get",
    url:url.API_GET_ORDER_BYID+sessionStorage.getItem("id")
  }).then((res)=>{
    flag.value=false
    plane_msg.plane=res.data
    if (res.data=="") {
      datanotnull.value=true
      
    }
    if(res.data!="")
    {
    pageshow.value=true

    }
  })
}
let store=useStore()
let router=useRouter()

let nowpay=function(value,id){
  let arr=[]

  localStorage.setItem("price",value.orderMoney)
  localStorage.setItem("order_id",value.id)
  for(var i =0;i<value.orderVo.length;i++)
  {
    arr.push(value.orderVo[i].people)
  }
  localStorage.setItem("people",JSON.stringify(arr))
  if(value.ticketVo.length==1){
    localStorage.setItem("ticket",JSON.stringify(value.ticketVo[0].tickets))
  }
  else
  {
    let ticketarr=[]
    for(var j=0;j<value.ticketVo.length;j++)
    {
      for(var k=0;k<value.flightNumber.length;k++)
      {
        value.ticketVo[j].tickets.upAirportName=value.flightNumber[k].upAirportName
        value.ticketVo[j].tickets.downAirportName=value.flightNumber[k].downAirportName
      }
      ticketarr.push(value.ticketVo[j].tickets)
    }
    localStorage.setItem("ticket",JSON.stringify(ticketarr))

  }
  router.push({
    path:'/index/passenger/pay'
  })

}

let del_order=function(value){

  proxy.$confirm("确认删除该订单吗?","提示",{type:"waring"}).then(()=>{
      proxy.$http({
        method:"delete",
        url:url.API_DELETE_ORDER_BYID+value
      }).then((res)=>{
        if(res){
          ElMessage.success("删除成功...")
          location.reload()
        }
      })
  }).catch(()=>{})
}
function fun_date(aa){
    var date1 = new Date(),
    time1=date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate();//time1表示当前时间
    var date2 = new Date(date1);
    date2.setDate(date1.getDate()+aa);
    let m=0
    let d=0
    
    if(date2.getMonth()+1<10)
    {
      m="0"+(date2.getMonth()+1)
    }
    else{
      m=date2.getMonth()+1
    }

    if (date2.getDate()<10){
      d="0"+(date2.getDate())
    }
    else
    {
      d=date2.getDate()
    }
    var time2 = date2.getFullYear()+"-"+m+"-"+d;
    return time2;
}
let buyone=function(upCity,downCity,type){
  if(type==1){

    let url=`http://106.12.147.168/#/index/ticketinformation/oneway?upCity=${upCity}&downCity=${downCity}&upDate=${fun_date(0)}`
    // let url=`http://localhost:3000/index/ticketinformation?upCity=${upCity}&downCity=${downCity}&upDate=${fun_date(7)}`
    window.location.href=url  
  }
  else{
    let url=`http://106.12.147.168/#/index/ticketinformation/oneway?upCity=${upCity}&downCity=${downCity}&upDate=${fun_date(7)}`
    // let url=`http://localhost:3000/index/ticketinformation?upCity=${upCity}&downCity=${downCity}&upDate=${fun_date(7)}`
    window.location.href=url  
  }

}


let upTicket=function(orderId,money,item){
    proxy.$confirm("是否要修改出发日期?改签的余额需要过一会才能退回到账户哦！","提示",{type:"waring"}).then(()=>{
    let ticketidarr=[]
    for(var i=0;i<item.ticketVo.length;i++){
      ticketidarr.push(item.ticketVo[i].storeId);
    }
    sessionStorage.setItem("Byorder",1)
    sessionStorage.setItem("orderId",orderId)
    sessionStorage.setItem("item",JSON.stringify(item))
    sessionStorage.setItem("money",money)

    if(item.flightNumber.length==1)
    {

      // let url=`http://106.12.147.168/#/index/ticketinformation/oneway?upCity=${item.flightNumber[0].upCity}&downCity=${item.flightNumber[0].downCity}&upDate=${fun_date(0)}`
      // let url=`http://localhost:3000/#/index/ticketinformation/oneway?upCity=${item.flightNumber[0].upCity}&downCity=${item.flightNumber[0].downCity}&upDate=${item.ticketVo[0].tickets.startDate}`
      let url=`http://106.12.147.168/#/index/ticketinformation/oneway?upCity=${item.flightNumber[0].upCity}&downCity=${item.flightNumber[0].downCity}&upDate=${item.ticketVo[0].tickets.startDate}`
      window.location.href=url  

    }
    else if(item.flightNumber.length>2)
    {
      let url=`http://106.12.147.168/#/index/ticketinformation/multipass?upCity=%E5%8C%97%E4%BA%AC_%E6%BD%8D%E5%9D%8A_%E5%8C%97%E4%BA%AC&downCity=%E6%BD%8D%E5%9D%8A_%E5%8D%97%E5%AE%81_%E4%B9%8C%E9%B2%81%E6%9C%A8%E9%BD%90&upDate=2022-07-28_2022-07-29_2022-07-30`
      console.log(item);
    }
    else{
      // let url=`http://localhost:3000/#/index/ticketinformation/round?upCity=${item.flightNumber[0].upCity}&downCity=${item.flightNumber[0].downCity}&upDate=${item.ticketVo[0].tickets.startDate}&downDate=${item.ticketVo[1].tickets.startDate}`
      let url=`http://106.12.147.168/#/index/ticketinformation/round?upCity=${item.flightNumber[0].upCity}&downCity=${item.flightNumber[0].downCity}&upDate=${item.ticketVo[0].tickets.startDate}&downDate=${item.ticketVo[1].tickets.startDate}`

      window.location.href=url  

    }
    // proxy.$http({
    //   method:"post",
    //   url:url.API_GET_RETREATTICKET,
    //   data:ticketidarr
    // }).then(res=>{

    // })

  }).catch(()=>{})

  // if(item.flightNumber.length==1){
  //     buyone(item.flightNumber[0].upCity,item.flightNumber[0].downCity)
  // }
  // else
  // {
  //     let url=`http://106.12.147.168/#/index/ticketinformation/round?upCity=${item.flightNumber[0].upCity}&downCity=${item.flightNumber[0].downCity}&upDate=${item.ticketVo[0].tickets.startDate}&downDate=${fun_date(2)}`
  //     window.location.href=url  
  // }
}
let drawer = ref(false)
let flags=ref(0)
let showOne=ref(-1)
let clickallMsg=function(value,index){
  if(showOne==0|showOne){
      showOne=-1
  }
  else{
    showOne=index
  }
  flags.value=value
  drawer.value = true
}

let id =sessionStorage.getItem("id")
let retreatnow=function(orderId,money,item){
  proxy.$confirm("是否要退票！?","提示",{type:"waring"}).then(()=>{
    let ticketidarr=[]
    for(var i=0;i<item.ticketVo.length;i++){
      // ticketidarr.push(ticketId[i].ticketId)
      ticketidarr.push(item.ticketVo[i].storeId);
    }
    proxy.$http({
      method:"post",
      url:url.API_GET_RETREATTICKET,
      data:ticketidarr
    })

    proxy.$http({
      method:"get",
      url:url.API_GET_ADDMONEY+id+"/"+money
    })
    proxy.$http({
        method:"get",
        url:url.API_Update_OrderStatus_ById+orderId+"/"+"4"
    }).then(res=>{
        if(res){
            ElMessage.success("退票成功!!!")
            location.reload()
        }
    })

  }).catch(()=>{})


}
let cancelOrder=function(orderId,money,item){
  proxy.$confirm("是否要取消订单，取消过后将无法支付?","提示",{type:"waring"}).then(()=>{
    let ticketidarr=[]
    for(var i=0;i<item.ticketVo.length;i++){
      // ticketidarr.push(ticketId[i].ticketId)
      ticketidarr.push(item.ticketVo[i].storeId);
    }
    proxy.$http({
      method:"post",
      url:url.API_GET_RETREATTICKET,
      data:ticketidarr
    }).then(res=>{

    })
      proxy.$http({
        method:"delete",
        url:url.API_DELETE_ORDER_BYID+orderId
      }).then((res)=>{
        if(res){
          ElMessage.success("删除成功...")
          location.reload()
        }
      })

  }).catch(()=>{})


}
</script>

<style scoped>




#box{
  width: 100%;
  /* height: 420px; */
  /* background: black; */

}
#order_box{
  width: 100%;
  height: 400px;
  margin-top: 20px;
  background-color: #fff;
  cursor: pointer;
  padding: auto;
  /* position: absolute; */
  border: 1px solid #d9d9d9;
}
#order_box:hover{
  background-color: #ecf5ff;
  border-color: #c6e2ff;
}
.order_herder{
  width: 100%;
  height: 36px;
  background-color: #e0dada;
}
.herder_style{
  width: 600px;
  height: 100%;
  line-height: 2;
}
.herder_style span{
  margin: 5px;
}
.herder_style a{
  text-decoration: none;
}
.order_body{
  width: 100%;
  height: 300px;
  position: relative;
  z-index: 999;
}
.body_style{
  width: 95%;
  height: 100%;
  /* background-color: rebeccapurple; */
  position: absolute;
  top: 20px;
  left: 36px;
  display: flex;

}
.body_span{
  width: 400px;
  height: 100%;
  /* background-color: red; */
  /* margin-left: 70px; */
}
.plan_span{
  position: absolute;
  left: 0;
}
.plan_span span{
  font-weight: bold;
  font-size: 36px;
  /* margin-left:30px; */
}
.body_span img{
  width: 40px;
  height: 40px;

}
.body_span p{
  font-size: 20px;
  /* margin-top: 20px; */
  color: #333;
  font-family:Microsoft YaHei,Tahoma,SimSun,Verdana,Arial,sans-serif;
  font-weight: bold;
}
.body_span ul{
  height: 60px;
  /* background-color: rebeccapurple; */
}
.body_span ul li{
  list-style: none;

  margin:20px 20px  0 0;
  color: #303133;
  font-size: 20px;
  font-weight: 400;
  font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\5fae\8f6f\96c5\9ed1,Arial,sans-serif;
}
.city_font span{
  font-size: 22px;
  margin: 0 85px 0 30px;
}

.order_footer{
  width: 100%;
  height: 60px;
  /* background: red; */
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.footer_but{
  background-color: rgba(231, 190, 190,0);
  border-radius: 4px;
  text-overflow: ellipsis;
  cursor: pointer;
  width: 95px;
  height: 30px;
  margin-top: 20px;
  margin-right: 45px;
}
.buy:hover{
  background-color: rgb(212,229,251,0.5);
}
.del:hover{
  background-color: rgba(253,220,220,0.5);
}
.buy{
  color: #629ff0;
  border: 1px solid #609eef;
}
.del{
  color: #F56C6C;
  border: 1px solid #F56C6C;
}
.time_sty h3{
  margin-top: -30px;
  margin-left: -20px;
}

.peopleMsg span{
  /* margin: 20px; */
}
.tripMsg{
  width: 100%;
  height: 285px;
  /* background-color: red; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>